<template>
  <div class="editSpread">
    <el-form :model="spreadForm" label-width="72px" ref="spreadRefs" class="spreadCls">
      <el-row :gutter="20">
        <el-col v-bind="grid">
          <el-form-item label="代理角色：" class="selectFormWidth100">
            <el-select v-model="spreadForm.roleId" placeholder="请选择代理角色" size="small" clearable @change="getList('1')">
              <el-option label="全部" :value="-1"></el-option>
              <el-option :label="item.name" :value="item.id" v-for="item in tableAgentRolesList" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-bind="grid">
          <el-form-item label="搜索：" class="search-select">
            <el-input v-model="spreadForm.keyword" placeholder="请输入用户名或手机号" size="small" clearable>
              <el-button slot="append" icon="el-icon-search" size="small" @click="getList('1')"></el-button>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      v-loading="tableLoading"
      :data="tableList"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%;"
      size="mini"
      class="table"
    >
      <el-table-column label="选择" align="center" min-width="50">
        <template slot-scope="{ row, $index }">
          <el-radio class="tableRadio" :label="row.id" @change.native="changeNative($index, row)" v-model="editRadio">&nbsp;</el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID" align="center" min-width="50"></el-table-column>
      <el-table-column label="代理商" align="center" min-width="150">
        <template slot-scope="{ row }">
          <span>{{ row.agentRoleId | agentRoleFilter }}({{ row.agentRole.agentLevelId | agentLevelFilter }})</span>
        </template>
      </el-table-column>
      <el-table-column label="代理商名称" align="center" min-width="120" prop="name"></el-table-column>
      <el-table-column label="代理商电话" align="center" min-width="120" prop="mobile"></el-table-column>
      <el-table-column label="微信用户名称" align="center" min-width="100">
        <template slot-scope="{ row }">
          <span>{{ row.user.realName || row.user.nickName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="头像" min-width="60">
        <template slot-scope="{ row }">
          <div class="taoBox_img" v-viewer>
            <img v-lazy="$uploadURL(row.user.headImage)" :alt="$uploadURL(row.user.headImage)">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="用户类型" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.user.registerFrom }}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别" min-width="60" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.user.gender | genderFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地区" min-width="250" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.user.address }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="spreadBox">
      <pagination
        v-show="pagination.total > 0"
        :total="pagination.total"
        :page.sync="pagination.page"
        :limit.sync="pagination.limit"
        :page-sizes="[10, 20, 30, 50]"
        @pagination="replyChange"
      />
    </div>
  </div>
</template>

<script>
  import {
    getAgentListApi,
    getRolesListApi
  } from '@/api/agent';

  let _this;

  export default {
    name: "index",
    data() {
      return {
        grid: {
          xl: 10,
          lg: 10,
          md: 12,
          sm: 12,
          xs: 24
        },
        spreadLoading: false,
        tableLoading: false,
        spreadForm: {
          keyword: '',
          roleId: ''
        },
        pagination: {
          page: 1,
          limit: 10,
          total: 0
        },
        editRadio: '',
        tableList: [],
        tableAgentRolesList: []
      }
    },
    beforeCreate() {
      _this = this;
    },
    filters: {
      agentLevelFilter(val) {
        for (let i = 0; i < _this.tableAgentRolesList.length; i++) {
          if (val == _this.tableAgentRolesList[i].level) return _this.tableAgentRolesList[i].levelName;
        };
      },
      agentRoleFilter(val) {
        for (let i = 0; i < _this.tableAgentRolesList.length; i++) {
          if (val == _this.tableAgentRolesList[i].id) return _this.tableAgentRolesList[i].name;
        };
      }
    },
    created() {
      this.getList();
      this.getAgentRoles();
    },
    methods: {
      /**
       * 获取选中数据
       */
      handleCurrentChange(val) {
        this.editRadio = val.id;
        this.$emit('putAgentInfo', val.id);
        this.$emit('close');
      },
      /**
       * 获取选中数据
       */
      changeNative(index, val) {
        this.$emit('putAgentInfo', val.id);
        this.$emit('close');
      },
      /**
       * 获取代理商角色信息
       */
      getAgentRoles() {
        getRolesListApi({
          pageNumber: 1,
          pageSize: 30
        }).then(res => {
          console.log('获取代理商角色信息', res);
          this.$set(this, 'tableAgentRolesList', res.data);
        });
      },
      /**
       * 获取代理商列表
       */
      getList(num) {
        this.$set(this, 'tableLoading', true);
        getAgentListApi({
          pageNumber: num ? num : this.pagination.page,
          pageSize: this.pagination.limit,
          orderBy: 'Id desc',
          keyword: this.spreadForm.keyword,
          agentRoleId: this.spreadForm.roleId ? this.spreadForm.roleId : -1
        }).then(res => {
          console.log('获取代理商列表', res);
          this.$set(this, 'tableList', res.data);
          this.$set(this.pagination, 'total', res.head.totalCount);
          this.$set(this, 'tableLoading', false);
        }).catch(() => {
          this.$set(this.pagination, 'total', 0);
          this.$set(this, 'tableList', []);
          this.$set(this, 'tableLoading', false);
        });
      },
      replyChange(reply) {
        this.$set(this.pagination, 'page', reply.page);
        this.$set(this.pagination, 'limit', reply.limit);
        this.getList();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .editSpread {
    .taoBox_img {
      width: 36px;
      height: 36px;
      border-radius: 4px;
      overflow: hidden;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .spreadBox {
      ::v-deep .pagination-container {
        margin-top: 25px;
        padding: 0 0;
        .el-pagination {
          display: flex;
          justify-content: flex-end;
        }
      }
    }
    .tableRadio {
      ::v-deep .el-radio__label {
        display: none;
      }
    }
  }
</style>
